<template>
	<view class="">
		<view class="" v-if="show == false">
			<!-- 发布内容 -->
			<view class="min30 rad2 column" style="border: 2rpx solid #FAB029;">
				<view class="box center size26 font500">
					发布信息
				</view>
				<view class="min30 column">
					<view class="">
						<view class="size28 font700 center minbottom20" style="color: #885400;">
							基本信息
						</view>
						<view class="row size28 font700 col3 align minbottom20">
							<image src="@/static/index/type.png" mode=""
								style="width: 36rpx;height: 36rpx;margin-right: 10rpx;">
							</image>
							出租/出售类别
						</view>
						<view class="" @click="categoryshow = true">
							<u--input placeholder="请填写类别" disabled="true" v-model="category"
								suffixIcon="arrow-down-fill" customStyle="background-color: #F5F5F5;"
								suffixIconStyle="color: #333"></u--input>
						</view>
						<view class="">
							<view class="row size28 font700 col3 align minbottom20 mintop30">
								<image src="@/static/index/22.png" mode=""
									style="width: 34rpx;height: 36rpx;margin-right: 10rpx;">
								</image>
								出租/出售标题
							</view>
							<u--input placeholder="请填写标题" v-model="fromdata.name"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view>
						<view class="row size28 font700 col3 align minbottom20 mintop30">
							<image src="@/static/index/add.png" mode=""
								style="width: 32rpx;height: 36rpx;margin-right: 10rpx;">
							</image>
							{{ category == '农产品' ? '发货位置' : '出租/出售位置' }}
						</view>
						<view @click="addshow = true">
							<u--input placeholder="请填写具体位置" disabled="true" v-model="address"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view>
						<view class="row size28 font700 col3 align minbottom20 mintop30">
							<image src="@/static/index/add.png" mode=""
								style="width: 32rpx;height: 36rpx;margin-right: 10rpx;">
							</image>
							详细地址
						</view>
						<u--input placeholder="请填写详细地址" v-model="fromdata.detailed_address"
							customStyle="background-color: #F5F5F5;"></u--input>
						<!-- <view class="" v-if="category == '农产品'">
							<view class="row size28 font700 col3 align minbottom20 mintop30">
								<image src="@/static/index/105.png" mode=""
									style="width: 36rpx;height: 34rpx;margin-right: 10rpx;">
								</image>
								出售数量
							</view>
							<u--input placeholder="请填写数量" v-model="quantity" :type="number"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view> -->
						<view class="" v-if="category == '农产品'">
							<view class="row size28 font700 col3 align minbottom20 mintop30">
								<image src="@/static/index/85.png" mode=""
									style="width: 36rpx;height: 36rpx;margin-right: 10rpx;">
								</image>
								上市时间
							</view>
							<view class="" @click="timeshow = true">
								<u--input placeholder="请选择时间" disabled="true" v-model="fromdata.availability"
									suffixIcon="arrow-down-fill" customStyle="background-color: #F5F5F5;"
									suffixIconStyle="color: #333"></u--input>
							</view>
						</view>
						<view class="" v-if="category != '农产品' && category != '农产品'">
							<view class="row size28 font700 col3 align minbottom20 mintop30">
								<image src="@/static/index/land.png" mode=""
									style="width: 36rpx;height: 36rpx;margin-right: 10rpx;">
								</image>
								出租/出售面积
							</view>
							<!-- #ifndef APP-NVUE -->
							<u-input placeholder="请填写面积" v-model="fromdata.area"
								customStyle="background-color: #F5F5F5;">
							<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请填写面积" v-model="fromdata.area"
									customStyle="background-color: #F5F5F5;">
								<!-- #endif -->
									<u--text text="亩" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
							<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
						<view class="row size28 font700 col3 align minbottom20 mintop30">
							<image src="@/static/index/Vector.png" mode=""
								style="width: 32rpx;height: 36rpx;margin-right: 10rpx;">
							</image>
							{{ category == '农产品' ? '出售价格' : '出租/出售价格' }}
						</view>
						<!-- #ifndef APP-NVUE -->
						<u-input placeholder="请填写价格" v-model="fromdata.price" customStyle="background-color: #F5F5F5;">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input placeholder="请填写价格" v-model="fromdata.price"
								customStyle="background-color: #F5F5F5;">
							<!-- #endif -->
								<!-- <u--text text="元" slot="suffix" margin="0 3px 0 0" type="tips"></u--text> -->
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
						<view v-if="category == '农产品' || category == '农机'">
							<view class="row size28 font700 col3 align  minbottom20 mintop30">
								流转方式
							</view>
							<view style="" @click="circulationshow = true">
								<u--input placeholder="请选择流转方式" disabled="true" v-model="circulation"
									suffixIcon="arrow-down-fill" customStyle="background-color: #F5F5F5;"
									suffixIconStyle="color: #333"></u--input>
							</view>
						</view>
						<!-- <view v-if="category == '农产品' || category == '农机'">
							<view class="row size28 font700 col3 align  minbottom20 mintop30">
								编号
							</view>
							<view style="">
								<u--input placeholder="请填写编号" v-model="fromdata.numbering"
									customStyle="background-color: #F5F5F5;"></u--input>
							</view>
						</view> -->
						<view v-if="category == '农机'">
							<view class="row size28 font700 col3 align  minbottom20 mintop30">
								司机
							</view>
							<view style="">
								<u--input placeholder="请填写编号" v-model="fromdata.driver"
									customStyle="background-color: #F5F5F5;"></u--input>
							</view>
						</view>
						<view class="mintop30 minbottom20" v-if="category == '农机'">
							<view class="row size28 font700 col3" style="margin-top: 19rpx;">
								收费标准
							</view>
							<view class="column mintop30">
								<view class="row mint" v-for="(item,index) in fromdata.traffic_conditions" :key="index">
									<view class="minright20" style="width: 49%;">
										<u--input placeholder="请填写条件" v-model="item.key"
											customStyle="background-color: #F5F5F5;"></u--input>
									</view>
									<view class="" style="width: 49%;">
										<u--input placeholder="请填写时间" v-model="item.value"
											customStyle="background-color: #F5F5F5;"></u--input>
									</view>
								</view>
								<view class="row mintop20">
									<view class="minright20" style="width: 49%;">
										<u-button text="添加" @click="addList"></u-button>
									</view>
									<view class="" style="width: 49%;">
										<u-button text="删除" @click="delList"></u-button>
									</view>
								</view>
							</view>

						</view>
					</view>
					<view class="column mintop10" v-if="category != '农机' && category != '农产品'">
						<view class="size28 font700 center" style="color: #885400;">
							详细信息
						</view>
						<view class="row mintop20">
							<view class="row size28 font700 col3 align minright20" style="width: 20%;">
								流转方式
							</view>
							<view style="width: 78%;" @click="circulationshow = true">
								<u--input placeholder="请选择流转方式" disabled="true" v-model="circulation"
									suffixIcon="arrow-down-fill" customStyle="background-color: #F5F5F5;"
									suffixIconStyle="color: #333"></u--input>
							</view>
						</view>
						<view class="row mintop30 minbottom20">
							<view class="row size28 font700 col3 align minright20" style="width: 20%;">
								水源条件
							</view>
							<u--input placeholder="请填写水源情况" v-model="fromdata.water_source_conditions"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view>
						<view class="row mintop30 minbottom20">
							<view class="row size28 font700 col3 align minright20" style="width: 20%;">
								土地类型
							</view>
							<u--input placeholder="请填写土地类型" v-model="fromdata.land_type"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view>
						<!-- <view class="row mintop30 minbottom20">
							<view class="row size28 font700 col3 align minright20" style="width: 20%;">
								土地编号
							</view>
							<u--input placeholder="请填写土地编号" v-model="fromdata.numbering"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view> -->
						<view class="row mintop30 minbottom20">
							<view class="row size28 font700 col3 align minright20" style="width: 20%;">
								流转年限
							</view>
							<u--input placeholder="请填写流转年限" v-model="fromdata.term"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view>
						<view class="row mintop30 minbottom20">
							<view class="row size28 font700 col3 minright20" style="width: 20%;margin-top: 19rpx;">
								交通条件
							</view>
							<view class="column" style="width: 80%;">
								<view class="row mint" v-for="(item,index) in fromdata.traffic_conditions" :key="index">
									<view class="minright20" style="width: 49%;">
										<u--input placeholder="请填写条件" v-model="item.key"
											customStyle="background-color: #F5F5F5;"></u--input>
									</view>
									<view class="" style="width: 49%;">
										<u--input placeholder="请填写时间" v-model="item.value"
											customStyle="background-color: #F5F5F5;"></u--input>
									</view>
								</view>
								<view class="row mintop20">
									<view class="minright20" style="width: 49%;">
										<u-button text="添加" @click="addList"></u-button>
									</view>
									<view class="" style="width: 49%;">
										<u-button text="删除" @click="delList"></u-button>
									</view>
								</view>
							</view>

						</view>
						<view class="row mintop30 minbottom20">
							<view class="row size28 font700 col3 align minright20" style="width: 20%;">
								电力条件
							</view>
							<view style="width: 78%;" @click="powershow = true">
								<u--input placeholder="请填写电力条件" disabled="true" v-model="fromdata.power_conditions"
									customStyle="background-color: #F5F5F5;"></u--input>
							</view>

						</view>
						<view class="row mintop30 minbottom20">
							<view class="row size28 font700 col3 align minright20" style="width: 20%;">
								海拔
							</view>
							<!-- #ifndef APP-NVUE -->
							<u-input placeholder="请填写海拔高度" v-model="fromdata.elevation"
								customStyle="background-color: #F5F5F5;">
							<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请填写海拔高度" v-model="fromdata.elevation"
									customStyle="background-color: #F5F5F5;">
								<!-- #endif -->
									<u--text text="米" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
							<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
					</view>
					<view class="column mintop30">
						<view class="size28 font700 center" style="color: #885400;">
							图片信息
						</view>
						<view class="mintop20">
							<view class="row size28 font700 col3 align minbottom10">
								上传图片
							</view>
							<u-upload :fileList="massif_img" @afterRead="massifRead" @delete="deletePic" name="massif"
								multiple :maxCount="9"></u-upload>
						</view>
						<view class="mintop30" v-if="category != '农机'">
							<view class="row size28 font700 col3 align minbottom20">
								上传视频
							</view>
							<u-upload :fileList="file_img" @afterRead="massifRead" @delete="deletePic" name="file"
								multiple :maxCount="1" accept="video"></u-upload>
						</view>
					</view>
					<view class="column mintop10">
						<view class="size28 font700 center" style="color: #885400;">
							个人信息
						</view>
						<view class="row mintop20">
							<view class="row size28 font700 col3 align minright20">
								联系人
							</view>
							<u--input placeholder="请填写联系人姓名" v-model="fromdata.contact"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view>
						<view class="row mintop30 minbottom20">
							<view class="row size28 font700 col3 align minright20">
								手机号
							</view>
							<u--input placeholder="请填写联系人手机号" maxlength="11" v-model="fromdata.phone"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view>
					</view>
				</view>

			</view>
			<!-- 发布内容 -->
			<!-- 协议 -->
			<view class="disflex" style="justify-content: center;">
				<u-checkbox-group @change="checkboxChange" shape="circle">
					<u-checkbox activeColor="#C2AE8C" name="1" label="我已阅读并同意" labelSize="13"
						label-color="#000"></u-checkbox>
					<view class="size26 font500" style="color: #A94315;"
						@click="this.$jump.nav('/releasepackage/protocol?type=' + 1)">
						《发布协议》
					</view>
				</u-checkbox-group>
			</view>
			<!-- 协议 -->
			<!-- 发布按钮 -->
			<view class="minauto mintop40 minbottom40" style="width: 400rpx;">
				<u-button shape="circle" color="linear-gradient( 136deg, #FFBC43 0%, #FFDA97 100%)"
					customStyle="color: #885400;font-weight: 600;" text="发布" @click="onRelease"></u-button>
			</view>

			<!-- 发布按钮 -->
			<!-- 类目选择器 -->
			<u-picker :show="categoryshow" keyName="title" :columns="columns" @confirm="categoryConfirm"
				@cancel="categoryCancel"></u-picker>
			<!-- 类目选择器 -->
			<!-- 流转方式选择器 -->
			<u-picker :show="circulationshow" :columns="circulationcolumn" @confirm="circulationConfirm"
				@cancel="circulationCancel"></u-picker>
			<!-- 流转方式选择器 -->
			<!-- 流转方式选择器 -->
			<u-picker :show="powershow" :columns="powercolumn" @confirm="powerConfirm" @cancel="powerCancel"></u-picker>
			<!-- 流转方式选择器 -->
			<!-- 日历 -->
			<u-calendar :show="timeshow" mode="single" @confirm="timeConfirm"></u-calendar>
			<!-- 日历 -->
		</view>
		<view class="" v-else>
			<view class="font600 size30 minauto center" style="color: #885400;margin-bottom: 120rpx;"
				:style="{ marginTop: pageHeight - 120 + 'px' }">
				已发布，等待审核
			</view>
			<view class="minauto mintop40 minbottom40" style="width: 400rpx;">
				<u-button shape="circle" color="linear-gradient( 136deg, #FFBC43 0%, #FFDA97 100%)"
					customStyle="color: #885400;font-weight: 600;" text="返回首页"
					@click="$jump.switch('/pages/index/index')"></u-button>
			</view>
		</view>
		<!-- 省县区选择器 -->
		<u-picker :show="addshow" ref="uPicker" keyName="name" :columns="addlist" @confirm="addConfirm"
			@cancel="addshow = false" @change="changeHandler"></u-picker>
		<!-- 省县区选择器 -->
	</view>


</template>

<script>
	export default {
		data() {
			return {
				pageHeight: '',
				category: '',
				address: '',
				circulation: '',
				carousel: [],
				fromdata: {
					category_ids: '',
					user_id: '',
					contact: '',
					phone: '',
					name: '',
					land_location: '',
					land_type: '',
					detailed_address: '',
					availability: '',
					area: '',
					price: '',
					method: '',
					water_source_conditions: '',
					term: '',
					traffic_conditions: [{
						key: '',
						value: ''
					}],
					// numbering: '',
					driver: '',
					power_conditions: '',
					elevation: '',
					cover: '',
					carousel: [],
					video: '',
				},
				massif_img: [],
				file_img: [],
				show: false,
				addshow: false,
				categoryshow: false,
				circulationshow: false,
				powershow: false,
				timeshow: false,
				checkboxValue: '',
				addlist: [],
				columnsList: [],
				columns: [],
				circulationcolumn: [
					['转让', '出租']
				],
				powercolumn: [
					['民用电', '三项电', '需增设']
				]
			}
		},
		onLoad() {
			this.show = false
			this.pageHeight = uni.getSystemInfoSync().windowHeight / 2
			//当前页面展示的时候他就执行该生命周期
			this.fromdata.user_id = uni.getStorageSync('user_id');
			if (this.fromdata.user_id) {
				//如果存在token
				this.getCategory()
				this.getAreaList()
				//按正常逻辑来讲 登录成功 我们是不是需要向服务器获取用户的信息？
				//那么我们一起来获取用户信息
			} else {
				this.$com.toast('您还未登录，正在前往登录')
				setTimeout(() => {
					this.$jump.nav('/mypackage/sign')
				}, 1000)
			}
		},
		onShow() {

		},
		methods: {
			async getCategory() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletAsking/CategoryList")
				if (code == 1) {
					this.columns = [data]
				} else {
					console.log(msg);
				}
			},
			async getAreaList() {
				let departmentColumns = [] //部门岗位数据
				let originalColumns = [] //默认的子数据
				let thirdData = []
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletAsking/AreaList")
				if (code == 1) {
					this.columnsList = data //选择数据
					//初始数据
					departmentColumns = data
					if (data[0].children == null) {
						originalColumns = []
					} else {
						originalColumns = data[0].children //第一层下面的第二层数据
					}
					if (originalColumns[0].children == null) {
						thirdData = []
					} else {
						thirdData = originalColumns[0].children //第二层下面的第三层数据
					}
					this.addlist = [departmentColumns, originalColumns, thirdData]
				} else {
					console.log(msg);
				}
			},
			checkboxChange(n) {
				this.checkboxValue = n[0]
			},
			onRelease() {
				let that = this;
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (!that.fromdata.contact) return this.$com.toast('请填写联系人');
				if (!that.fromdata.phone) return this.$com.toast('请输入手机号');
				if (!strTemp.test(that.fromdata.phone)) return this.$com.toast('手机号输入不正确');
				if (!that.checkboxValue) return this.$com.toast('请先同意协议');
				that.getAddSell()
			},
			async getAddSell() {
				this.fromdata.user_id = uni.getStorageSync('user_id');
				let {
					code,
					msg,
					data
				} = await this.$com.fetch("AppletHome/PubliShsale", this.fromdata)
				if (code == 1) {
					this.$com.toast(msg)
					this.show = true
					// setTimeout(() => {
					// 	this.$jump.switch('/pages/sell/sell')
					// }, 1000)
				} else {
					console.log(msg);
					this.$com.toast(msg)
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					let items = this.columnsList[index].children.map((e) => {
						return e
					})
					picker.setColumnValues(1, items)
					items = this.columnsList[index].children[0].children.map((e) => {
						return e
					})
					picker.setColumnValues(2, items)
				}
				if (columnIndex === 1) {
					let items = this.columnsList[indexs[0]].children[index].children.map(
						(e) => {
							return e
						})
					picker.setColumnValues(2, items)
				}
			},
			addList() {
				let arr = {}
				arr['key'] = ''
				arr['value'] = ''
				this.fromdata.traffic_conditions.push(arr)
			},
			delList() {
				if (this.fromdata.traffic_conditions.length != 1) {
					this.fromdata.traffic_conditions.pop()
				}
			},
			addCancel() {
				this.addshow = false
				this.address = ''
				this.fromdata.land_location = ''
			},
			addConfirm(e) {
				var addarr = []
				e.value.map((e) => {
					addarr.push(e.id)
				})
				this.fromdata.land_location = addarr.toString()
				this.address = e.value[0].name + e.value[1].name + e.value[2].name
				// console.log(this.address_id)
				this.addshow = false
			},
			// 删除地块图片
			deletePic(event) {
				this[`${event.name}_img`].splice(event.index, 1)
			},
			// 新增图片
			async massifRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`${event.name}_img`].length
				lists.map((item) => {

					this[`${event.name}_img`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					console.log(lists[i].url);
					const result = await this.uploadFilePromise(lists[i].url, event.name)
					let item = this[`${event.name}_img`][fileListLen]
					this[`${event.name}_img`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url, name) {
				// 假设你已经获取了文件对象file
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://tlw.ynlckjht.com/api/AppletUpload/specsupload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
							server: 1,
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
							var data = JSON.parse(res.data)
							if (data.code == 1) {
								if (name == 'massif') {
									this.carousel.push(data.data)
									this.fromdata.cover = this.carousel[0]
									this.fromdata.carousel = this.carousel.toString()
								} else {
									this.fromdata.video = data.data
								}
							}

						}
					});
				})
			},
			// 删除文件图片
			deleteFile(event) {
				this[`fileimglist${event.name}`].splice(event.index, 1)
			},
			categoryCancel() {
				this.categoryshow = false
			},
			categoryConfirm(e) {
				this.categoryshow = false
				var fromdata = {
					category_ids: '',
					user_id: '',
					contact: '',
					phone: '',
					name: '',
					land_location: '',
					land_type: '',
					detailed_address: '',
					availability: '',
					area: '',
					price: '',
					method: '',
					water_source_conditions: '',
					term: '',
					traffic_conditions: [{
						key: '',
						value: ''
					}],
					// numbering: '',
					driver: '',
					power_conditions: '',
					elevation: '',
					cover: '',
					carousel: [],
					video: '',
				}
				this.address = ''
				this.circulation = ''
				this.carousel = []
				this.massif_img = []
				this.file_img = []
				this.category = e.value[0].title
				fromdata.category_ids = e.value[0].id
				fromdata.land_type = e.value[0].title
				this.fromdata = fromdata
			},
			circulationCancel() {
				this.circulationshow = false
				this.circulation = ''
				this.fromdata.method = ''
			},
			circulationConfirm(e) {
				this.circulation = e.value[0]
				this.fromdata.method = this.circulation == '转让' ? 0 : 1
				this.circulationshow = false
			},
			powerCancel() {
				this.powershow = false
				this.fromdata.power_conditions = ''
			},
			powerConfirm(e) {
				this.fromdata.power_conditions = e.value[0]
				this.powershow = false
			},

			timeConfirm(e) {
				this.fromdata.availability = e[0]
				this.timeshow = false
			}
		}
	}
</script>

<style scoped lang="less">
	.mint {
		margin-top: 20rpx;

		&:nth-child(1) {
			margin-top: 0;
		}
	}

	.box {
		background: linear-gradient(136deg, #FFBC43 0%, #FFDA97 100%);
		border-radius: 20rpx 0rpx 20rpx 0rpx;
		padding: 10rpx 30rpx;
		width: 140rpx;
		color: #885400;

	}
</style>